{% include 'header.html' %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统兼容性统计 - Steam游戏库</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="../static/js/echarts.js"></script>
</head>
<body class="bg-light">
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card shadow-lg border-0 rounded-lg">
                    <div class="card-body p-5">
                        <h1 class="card-title text-center mb-4 display-4 fw-bold text-primary">系统兼容性统计</h1>
                        
                        <div id="sysChart" style="width: 100%; height: 400px;"></div>
                        
                        <div class="text-center mt-4">
                            <a href="/index" class="btn btn-outline-primary">返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        var chartDom = document.getElementById('sysChart');
        var myChart = echarts.init(chartDom);
        
        // 准备数据
        var sysStats = {{ sys_stats|tojson }};
        console.log(sysStats)
        var data = [
            { value: sysStats.windows, name: 'Windows' },
            { value: sysStats.mac, name: 'Mac' },
            { value: sysStats.linux, name: 'Linux' }
        ];
        
        // 配置项
        var option = {
            title: {
                text: '游戏系统兼容性分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['Windows', 'Mac', 'Linux']
            },
            series: [
                {
                    name: '系统兼容性',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        };

        // 使用配置项显示图表
        myChart.setOption(option);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
